<template>
    <div class="dialog-notice">
        <el-dialog title="编辑管理员信息" :visible.sync="dialogVisible" width="35%" @close="handleClose">
            <el-form :model="form" status-icon ref="form">
                <el-form-item prop="avatarUrl" label="头像" :label-width="formLabelWidth">
                    <!-- <el-upload class="upload-demo" action="http://134.175.252.64:8080/file/upload"
                        :on-success="handleSuccess" multiple :limit="2" :file-list="fileList"> -->
                    <el-button size="small" type="primary" disabled>点击上传</el-button>
                    <!-- </el-upload> -->
                </el-form-item>
                <el-form-item prop="roleId" label="角色" :label-width="formLabelWidth">
                    <el-select size="small" v-model="value" placeholder="请选择管理员角色">
                        <el-option v-for="item in options" :key="item.roleCode" :label="item.roleName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="userAccount" label="账号" :label-width="formLabelWidth">
                    <el-input v-model="form.userAccount" autocomplete="off" size="small" disabled></el-input>
                </el-form-item>
                <el-form-item prop="username" label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off" size="small" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userTel" label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.userTel" autocomplete="off" size="small" disabled></el-input>
                </el-form-item>
                <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form.email" autocomplete="off" size="small" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm">取 消</el-button>
                <el-button type="info" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'EditAdminDialog',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            dialogVisible: false,
            form: {
                username: '',
                userAccount: '',
                userTel: '',
                email: '',
                avatarUrl: '',
                roleId: ''
            },
            formLabelWidth: '80px',
            fileList: [],
            imageUrl: '',
            options: [],
            value: ''
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo']),
        hasId() {
            return 'id' in this.form
        }
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('edit', this.dialogShow)
        this.$bus.$on('getForm', this.getForm)
    },
    methods: {
        handleClose() {
            this.form = {}
            // this.$refs[formName].resetFields();
            this.value = ''
            this.fileList = []
        },
        // 获取角色列表
        getRoleData() {
            this.request.get('/role/getRoleList').then(res => {
                if (res.code == 20000) {
                    this.options = res.data
                }
            })
        },
        submitForm() {
            this.form.avatarUrl = this.imageUrl
            this.form.roleId = this.value
            // this.$refs[formName].validate((valid) => {
            // if (valid) {
            let obj = {
                id: this.form.userId,
                username: this.form.username,
                userAccount: this.form.userAccount,
                userTel: this.form.userTel,
                email: this.form.email,
                avatarUrl: this.form.avatarUrl,
                roleId: this.form.roleId
            }
            this.$emit('editAdmin', obj)

            this.dialogVisible = false
            // } else {
            // return false;
            // }
            // });
        },
        resetForm() {
            // this.$refs[formName].resetFields();
            this.dialogVisible = false
        },
        dialogShow(value) {
            this.dialogVisible = value
            this.getRoleData()
        },
        getForm(editRow) {
            this.form = editRow
            this.value = editRow.roleId
            this.imageUrl = editRow.avatarUrl
        },
        handleSuccess(response, file, fileList) {
            this.$set(this.fileList, 0, file)
            this.imageUrl = response.data.url
        }
    },
    beforeDestroy() {
        this.$bus.$off(['edit', 'getForm'])
    },
};
</script>
<style lang='less' scoped>
.dialog-notice {
    background-color: aqua;

    .el-form {
        padding: 10px 40px;
    }

    .el-input__inner:focus {
        border-color: #11A983 !important;
        /* 使用!important确保覆盖 */
    }

    .el-button--primary {
        color: white;
        background-color: #11A983;
    }
}
</style>